import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import { Table, Spin, Form, Row, Col, Input, Button, message } from 'antd'
import Ajax from 'lib/Ajax'
const FormItem = Form.Item;

class ModuleName extends Component {
	constructor(props) {
    super(props);
    this.state = {
      
    }
  }

  componentDidMount(){
  	
  }

  handleSubmit = (e) => {
    var self = this;
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        Ajax({
          url: '/user/updatePwd',
          data: {
            userId: this.props.common.user.userId,
            oldPwd: values.oldPwd,   
            newPwd: values.newPwd
          },
          success: function(data){
            self.props.form.resetFields();
            message.success("密码修改成功");
          },
          error: function(error){
            message.error(error);
          }
        });
      }
    });
  }

  checkPassowrd = (rule, value, callback)=> {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('newPwd')) {
      callback('两次输入密码不一致');
    } else {
      callback();
    }
  }
  
  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        span: 14,
        offset: 6,
      },
    };
    return (
    <div style={{padding: '100px 0'}}>
    	<Row>
        <Col span={8} offset={8}>
          <Form horizontal onSubmit={this.handleSubmit}>
            <FormItem
              {...formItemLayout}
              label="旧密码"
              hasFeedback
            >
              {getFieldDecorator('oldPwd', {
                rules: [{
                  required: true, message: '请输入旧密码！',
                }, {
                  // validator: this.checkConfirm,
                }],
              })(
                <Input type="password" />
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="新密码"
              hasFeedback
            >
              {getFieldDecorator('newPwd', {
                rules: [{
                  required: true, message: '请输入新密码！',
                }, {
                  // validator: this.checkConfirm,
                }],
              })(
                <Input type="password" />
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="确认密码"
              hasFeedback
            >
              {getFieldDecorator('confirmNewPwd', {
                rules: [{
                  required: true, message: '请确认新密码！',
                }, {
                  validator: this.checkPassowrd,
                }],
              })(
                <Input type="password" />
              )}
            </FormItem>
            <FormItem {...tailFormItemLayout}>
              <Button type="primary" htmlType="submit" size="large">确认修改</Button>
            </FormItem>
          </Form>
      	</Col>
      </Row>
    </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    common: state.common
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({  }, dispatch)
}

module.exports = connect(mapStateToProps,mapDispatchToProps)(Form.create()(ModuleName))
